<template>
    <div class="page flex_column">
        <div class="section">
            <div class="flex_between align_center">
                <div class="name">知识库名称：{{ name }}</div>
                <div class="oBtn " @click="handleEditVue()">编辑</div>
            </div>
            <div class="describe">{{ describe }}</div>
        </div>

        <div class="section" style="margin-top: 15px;">
            <div class="flex_between align_center" style="width: 100%; padding-bottom: 12px;">
                <span style="color: #333; font-weight: 600; font-size: 13px;">知识库内容</span>
                <div class="flex">
                    <span style="color: #AAA; font-size: 13px" class="hover" @click="toShow" >管理已上传文档</span>
                    <span style="color: #AAA; font-size: 13px; padding-left: 15px;" class="hover" @click="download('https://ant-quanshi.oss-cn-hangzhou.aliyuncs.com/%E7%A4%BA%E4%BE%8B%E6%A8%A1%E6%9D%BF1.docx')">批量上传示范模板</span>
                </div>
            </div>
            <div class="searchVue flex_between align_center">
                <div class="flex">
                    <el-select v-model="typeName" placeholder="知识库类型" style="width: 200px;" @change="typeChange" clearable>
                        <el-option v-for="item in options" :key="item.type" :label="item.name" :value="item.type"></el-option>
                    </el-select>
                    <el-input placeholder="搜索关键字" v-model="key" style="width: 200px; margin-left: 10px;" clearable prefix-icon="el-icon-search" @input="searchFun"></el-input>
                </div>
                <div class="flex">
                    <div class="btn">
                        <span class="el-icon-loading" v-if="loading" style="color: #fff;"></span>
                        <span v-else style="color: #fff;">批量上传(docx文档)</span>
                        <input ref="clearRef" class="fileBtn" type="file" id="fileupload" accept=".docx" @change="docxFileChange($event)"/>
                    </div>
                    <div class="btn" @click="uploadDialog=true" style="width: 60px;">上传</div>
                </div>
            </div>
        </div>
        <div class="content flex_1 relative" @scroll="handleScroll">
            <!-- 列表为空 -->
            <div class="flex_column align_center absolute_auto" v-if="isEmpty">
                <img src="../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 20px">
                <span style="color: #101010; font-weight: 600; font-size: 18px">当前列表是空哦~</span>
                <div style="color: #8F959E; padding-top: 15px">点击右上角的添加微信，绑定您的微信吧</div>
            </div>
            <div class="item" v-for="(item, index) in list" :key="index">
                <div class="flex_between align_center">
                    <el-tag type="info" v-if="item.type!=2">{{ ["文本", "多媒体", "链接"][item.type-1]}}</el-tag>
                    <div v-else>
                        <el-tag type="info" v-if="item.url.endsWith('png') || item.url.endsWith('jpg') || item.url.endsWith('jpeg')">图片</el-tag>
                        <el-tag type="info" v-if="item.url.endsWith('mp4')">视频</el-tag>
                        <el-tag type="info" v-if="item.url.endsWith('pdf') || item.url.endsWith('xlsx') || item.url.endsWith('docx')">文档</el-tag>
                    </div>
                    <div class="flex">
                        <el-button size="mini" type="edit" @click="handleEdit(item.id)">编辑</el-button>
                        <el-button size="mini" type="delete" @click="handleDelete(item.id)">删除</el-button>
                    </div>
                </div>

                <template v-if="item.type===3">
                    <div class="labelVue flex align_center">
                        <div class="label">链接</div>
                    </div>
                    <div class="link" @click="download(item.url)">{{ item.url }}</div>
                </template>
            
                <div class="labelVue flex align_center">
                    <div class="label">{{ item.type===1? "问题" : "关联问题" }}:</div>
                </div>
                <div class="flex" v-for="(o, i) in item.question.split('\n')" :key="i">
                    <div class="question">-</div>
                    <div class="question" v-html="searchLight(o)" style="padding-left: 5px;"></div>
                </div>
                

                <div class="labelVue flex align_center">
                    <div class="label">{{ ["答案", "多媒体内容描述", "链接内容描述"][item.type-1] }}:</div>
                </div>
                <div class="question" v-html="searchLight(item.answer)"></div>

                <template v-if="item.url.endsWith('png') || item.url.endsWith('jpg') || item.url.endsWith('jpeg')">
                    <div class="labelVue flex align_center">
                        <div class="label">上传的图片:</div>
                    </div>
                    <div class="imgVue margin10">
                        <viewer :images="item.url.split(',')">
                            <div class="file relative" v-for="(o, i) in item.url.split(',')" :key="i" title="点击查看图片" style="width: 33.333%;">
                                <i class=" line-1">{{ o.split('-')[o.split('-').length-1] }}</i>
                                <img :src="o" style="width: 100%; height: 100%; margin-right: 10px; cursor: pointer; opacity: 0;" class="absolute_auto">
                            </div>
                        </viewer>
                    </div>
                </template>

                <template v-if="item.url.endsWith('mp4')">
                    <div class="labelVue flex align_center">
                        <div class="label">上传的视频:</div>
                    </div>
                    <div class="imgVue margin10"> 
                        <div class="file relative" v-for="(o, i) in item.url.split(',')" :key="i" @click="videoShow(o)" title="点击查看视频" style="width: 33.333%;">
                            <i class=" line-1">{{ o.split('-')[o.split('-').length-1] }}</i>
                        </div>
                    </div>
                </template>

                <template v-if="item.url.endsWith('pdf') || item.url.endsWith('xlsx') || item.url.endsWith('docx')">
                    <div class="labelVue flex align_center">
                        <div class="label">上传的文件:</div>
                    </div>
                    <div class="imgVue margin10"> 
                        <div class="file relative" v-for="(o, i) in item.url.split(',')" :key="i" title="点击下载文件" @click="download(o)" style="width: 33.333%;">
                            <i class=" line-1">{{ o.split('-')[o.split('-').length-1] }}</i>
                        </div>
                    </div>
                </template>
            </div>
            <div class="flex align_center" style="padding: 0 40px;" v-if="isLoading">
                <el-divider></el-divider>
                <span class="el-icon-loading" style="padding: 0 15px; font-size: 20px"></span>
                <el-divider></el-divider>
            </div>
        </div>

        <uploadVue :dialogTableVisible="uploadDialog" @beforeClose="uploadDialog=false" @callback="searchFun"></uploadVue>
        <edit :dialogTableVisible="editDialog" @beforeClose="editDialog=false" ref="editRef" @callback="searchFun"></edit>
        <video :src="url" ref="videoRef" style="position: fixed; left: -1000px; top: -1000px;" :controls="false"></video>
        <uploadtextVue :dialogTableVisible="uploadtextDialog" @beforeClose="uploadtextDialog=false" ref="uploadtextRef" :id="uploadtextId"></uploadtextVue>
        <editVue :dialogTableVisible="editVueDialog" ref="editVueRef" @beforeClose="editVueDialog=false" @callback="getDetail"></editVue>
    </div>
</template>

<script>
import uploadVue from './components/upload.vue'
import { toast } from "@/common/tools"
import uploadtextVue from './components/uploadtext.vue'
import { post } from '@/common/request'
import edit from './components/edit.vue'
import editVue from './components/editVue.vue'
export default {
    components: {
        uploadVue,
        edit,
        uploadtextVue,
        editVue
    },

    data(){
        return {
            name: "",
            describe: "",
            pageNum: 1,
            pageSize: 10,
            type: "",
            typeName: "",
            options: [{ name:"文本", type:1 }, { name: "多媒体", type: 2 }, { name: "链接", type: 3 }],
            key: "",
            uploadDialog: false,
            list: [],
            isLastPage: false,
            isLoading: false,
            previewDialog: false,
            editDialog: false,
            uploadtextDialog: false,
            editVueDialog: false,
            url: "",
            isEmpty: false,
            uploadtextId: "",
            loading: false,
        }
    },

    created(){
        this.getDetail()
        this.list = []
        this.getDetailList()
    },

    methods: {
        toShow(){
            this.uploadtextDialog = true
            this.uploadtextId = this.$route.query.id  + ""
            setTimeout(() => {
                this.$refs.uploadtextRef.getDatasetDocumentList()
            }, 200); 
        },

        callback(){
            this.pageNum = 1
            this.getDetailList()
        },

        docxFileChange(e){
            let file = e.target.files[0];
            console.log(file.size)
            if(!file.name.endsWith(".docx")) return toast(1, "仅支持.docx文件")
            if (file.size > 5 * 1024 * 1024) return toast(1, "上传的文本文件大小不超过5M")
            if(this.$refs.clearRef && this.$refs.clearRef.value) this.$refs.clearRef.value = ''; // 清空file文件
            this.uploadDoc(file)
        },

        uploadDoc(file){
            if(this.loading) return
            this.loading = true
            let formData = new FormData()
            formData.append("file", file)
            formData.append("id", this.$route.query.id)  
            post("/front/dataset/uploadDoc", formData).then(result=>{
                this.loading = false
                if(result.data.code===0) {
                    toast(0, "上传成功")  
                    this.getDetailList()
                }else{
                    toast(1, result.data.msg)
                }
            }) 
        },

       

        // 获取知识库详情
        getDetail(){
            this.$post("/front/dataset/datasetDetail", {
                id: this.$route.query.id
            }).then(res=>{
                this.name = res.data.obj.name
                this.describe = res.data.obj.describe
            })
        },

        // 获取知识库内容
        getDetailList(){
            this.$post("/front/dataset/datasetContentList", {
                datasetId: this.$route.query.id,
                type: this.type,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                searchStr: this.key
            }).then(res=>{
                if(res.data.code===0) {
                    this.list = this.list.concat(res.data.obj.list)
                    this.isLastPage = res.data.obj.isLastPage
                    this.isEmpty = this.list.length===0
                    this.isLoading = false
                }else{
                    this.isLoading = false
                    this.isLastPage = false
                }   
            })
        },

        // 查看视频
        videoShow(src){
            let video = this.$refs.videoRef
            console.log(video)
            video.src = src
            if(video.requestFullscreen) {
                video.requestFullscreen()
            }else if(video.mozRequestFullscreen) {
                video.mozRequestFullscreen()
            }else if(video.webkitRequestFullscreen) {
                video.webkitRequestFullscreen()
            }else{
                video.msRequestFullscreen()
            }
            video.play()
        },

        // 搜索知识库内容
        searchFun(){
            this.pageNum = 1
            this.list = []
            this.getDetailList()
        },

        // 编辑知识库内容
        handleEditVue(){
            this.editVueDialog = true
            this.$refs.editVueRef.getDetail(this.$route.query.id)
        },

        // 搜索内容高亮显示
        searchLight(val){
            if(!this.key) return val
            const highlighted = val.replace(new RegExp(this.key, 'gi'), match => {
                return `<span style="color:#0147fd; font-weight: 600;">${match}</span>`;
            });
            return highlighted;
        },

        // 切换知识库类型
        typeChange(e){
            console.log(e)
            this.type = e
            this.pageNum = 1
            this.list = []
            this.getDetailList()
        },

        // 下载已上传文件
        download(url){
            window.open(url)
        },

        // 触底加载分页
        handleScroll(e){
            if(this.isLastPage || this.isLoading) return
            const { scrollTop, clientHeight, scrollHeight } = e.target
            if(scrollHeight - scrollTop - clientHeight < 10) {
                console.log("触底了")
                this.pageNum++
                this.isLoading = true
                this.getDetailList()
            }
        },

        // 编辑
        handleEdit(id){
            this.editDialog = true
            this.$refs.editRef.getDetail(id)
        },

        handleDelete(id){
            this.$alert(`确认删除该知识库内容？`, '删除', {
                confirmButtonText: '确定',
                confirmButtonClass: 'confirmButtonClass',
                cancelButtonText: '取消',
                showCancelButton: true,
                showClose: false,
                callback: action => {
                    console.log(action)
                    if(action==="confirm") {
                        this.$post("/front/dataset/deleteDatasetContent", {
                            ids: id
                        }).then(res=>{
                            if(res.data.code===0) {
                                toast(0, "删除成功")
                                this.list = this.list.filter(o=>{
                                    return o.id != id
                                })
                            } 
                        })
                    }
                }
            });
        },
    }
}
</script>


<style lang="less" scoped>
:deep(.el-icon-circle-close) {
    font-size: 18px !important;
    color: #409EFF !important;
}
:deep(.el-icon-search:before) {
    color: #AAA !important;
}
:deep(.el-button--delete) {
  background: #d81e06;
  span {
    color: #fff !important;
    font-size: 13px;
  }
}
:deep(.el-button--show) {
  background: #0147fd;
  span {
    color: #fff !important;
    font-size: 13px;
  }
}
.page {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    .section {
        width: 100%;
        padding: 15px;
        background: #fff;
        .oBtn {
            width: 66px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            background: #0147fd;
            border-radius: 3px;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
        }
        .hover:hover {
            cursor: pointer;
            text-decoration: underline;
        }
        .name {
            color: #333;
            font-weight: 600;
            font-size: 13px;
        }
        .describe {
            color: #999;
            padding-top: 15px;
            font-size: 13px;
        }
        .searchVue {
            width: 100%;
            height: 40px;
            .btn {
                width: 150px;
                height: 40px;
                border-radius: 4px;
                background: #0147fd;
                border-radius: 5px;
                line-height: 40px;
                text-align: center;
                color: #fff;
                cursor: pointer;
                margin-left: 10px;
                position: relative;
                .fileBtn {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    opacity: 0;
                    cursor: pointer;
                    z-index: 98;
                    border: none;
                    outline: none;
                }
            }
        }
    }
    
    .content {
        width: 100%;
        background: #fff;
        padding: 0 15px;
        overflow-y: scroll;
        .item {
            width: 100%;
            border: 1px solid #DCDFE6;
            border-radius: 6px;
            padding: 10px;
            margin-bottom: 10px;
            .file {
                height: 40px;
                text-align: center;
                line-height: 40px;
                border: 1px solid #DCDFE6;
                border-radius: 4px;
                margin-right: 10px;
                padding: 0 20px;
                display: inline-block;
                cursor: pointer;
                span,i {
                    line-height: 40px;
                    color: #AAA;
                    font-style: normal;
                }
                span {
                    cursor: pointer;
                    padding-left: 8px;
                }
            }
            .file:hover {
                background: #AAA;
                i {
                    color: #fff;
                    font-style: normal;
                }
            }
            .labelVue {
                margin-top: 15px;
            }
            .question {
                color: #999;
                padding-top: 10px;
                line-height: 1.4;
                white-space: wrap;
            }
            .link {
                color: #999;
                padding-top: 10px;
                cursor: pointer;
                line-height: 1.4;
            }
            .link:hover {
                text-decoration: underline;
            }
        }
    }
    .content::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}
</style>